var chartDom = document.getElementById('sandian.js');
var myChart = echarts.init(chartDom);
var option;

var option;

var data = [
    [['2017年',9775,1500000000,'烟尘'],['2018年',5779,600000000,'烟尘'],['2019年',3065,300000000,'烟尘'],['2020年',211,30000000,'烟尘']],
    [['2017年',10835,1500000000,'二氧化硫'],['2018年',11358,1600000000,'二氧化硫'],['2019年',3489,350000000,'二氧化硫'],['2020年',271,30000000,'二氧化硫']],
    [['2017年',12767,1800000000,'氮氧化物'],['2018年',12853,1800000000,'氮氧化物'],['2019年',2376,220000000,'氮氧化物'],['2020年',111,15000000,'氮氧化物']],
   
];

option = {
    graphic: [
        {
           type:"image",
           left:"5%",
           bottom:"91.5%",
           style: {
               image:"https://i.loli.net/2021/06/21/CvlGW8PErboK2YQ.png",
               width:"68",
               height:"45",
            }
         },
         ],
    backgroundColor:'rgb(0,21,46)',
    title: {
        text: '全国范围内的垃圾焚烧厂，各项污染物排放的超标次数大幅降低' ,
        left:'12%',
        top: '3%',
        textStyle: {
            fontSize:20,
            color:"#FFFFFF",
            fontFamily: "Microsoft YaHei",
               },
    },
    legend: {
        bottom: 15,
        itemGap: 50,
        textStyle:{
            color: '#fff',
            fontSize: 14,
                },
        data: ['烟尘','二氧化硫', '氮氧化物','一氧化碳','氯化氢']
    },
    grid: {
        left: '20%',
        top: '25%',
        right:"15%",
        bottom:"22%"
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2017年', '2018年', '2019年', '2020年'],
        name: '年份',
        nameGap: 20,
        nameTextStyle: {
            fontSize: 14,
            color:"rgba(149,152,175)",
        },
        axisLabel: {
            show: true,
            margin:"20",
            textStyle: {
                fontSize: 14,
                color:"rgba(149,152,175)",
            }},
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    yAxis: {
        name: '超标次数',
        nameGap: 20,
        nameTextStyle: {
            fontSize: 14,
            color:"rgba(149,152,175)",
        },
        axisLabel: {
           show: true,
           margin:"25",
           textStyle: {
               fontSize: 14,
               color:"rgba(149,152,175)",
           }},
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        scale: true
    },
    tooltip:{
        show:true,
    },
    series: [{
        name: '烟尘',
        data: data[0],
        type: 'scatter',
        symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5e2;
        },
        emphasis: {
            focus: 'series',
            label: {
                show: true,
                formatter: function (param) {
                    return param.data[3];
                },
                position: 'top'
            }
        },
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5,
            color: new echarts.graphic.LinearGradient( 0, 1, 0, 0,[
                { offset: 0, color: 'rgba(166,107,86)' },
                { offset: 1, color: 'rgba(242,146,104)' }
                                           ])
        }
    }, {
        name: '二氧化硫',
        data: data[1],
        type: 'scatter',
        symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5e2;
        },
        emphasis: {
            focus: 'series',
            label: {
                show: true,
                formatter: function (param) {
                    return param.data[3];
                },
                position: 'top'
            }
        },
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5,
            color: new echarts.graphic.LinearGradient( 0, 1, 0, 0,[
                { offset: 0, color: 'rgba(79,140,150)' },
                { offset: 1, color: 'rgb(129, 227, 238)' }
                                           ])
        }
    },
    {   name: '氮氧化物',
        data: data[2],
        type: 'scatter',
        symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5e2;
        },
        emphasis: {
            focus: 'series',
            label: {
                show: true,
                formatter: function (param) {
                    return param.data[3];
                },
                position: 'top'
            }
        },
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5,
            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                { offset: 0, color: 'rgba(136,226,226)' },
                { offset: 1, color: 'rgba(79,140,150)' }
                                           ])
        }
    },],
     media: [
            {
                option: {
                    title:{                         
                    },
                }
            },
            {
                query: {
                    maxWidth: 500
                },
                option: {
                    title:{
                        left:"21%",
                        top:"0%",
                        text: '全国范围内的垃圾焚烧厂，\n各项污染物排放的超标次数\n大幅降低',
                    },
                }
            }
        ]
};


option && myChart.setOption(option);
